<template>
  <div class="waitConfirmed">
    <div class="searchBox">
      <Form label-position="right" :label-width="130" class="search-form">
        <Row>
          <Col span="5">
            <FormItem label="设备类别：">
              <Select
                v-model="searchParams.categoryId"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                  v-for="(item) of category"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="保养项目：">
              <Input
                type="text"
                v-model="searchParams.itemProject"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="保养周期：">
              <Select
                v-model="searchParams.triggerCycle"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                  v-for="(item, index) of cycle"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
           <Col span="5" style="display: flex; justifyContent: space-around">
            <Button type="primary" @click="changeNum">{{$t('common.Query')}}</Button>
            <Button><Icon type="ios-paper-outline" />批量修改</Button>
            <Button><Icon type="ios-trash-outline" />批量删除</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table
        ellipsis
        ref="selection"
        :columns="columns"
        :data="data"
        @on-selection-change="onSelectChange"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="edit(row)">{{$t('common.Edit')}}</span>
          <span class="operationBtn" @click="deleteRow(row)">{{$t('common.Delete')}}</span>
        </template>
      </Table>
    </div>
    <Modal :mask-closable="false" v-model="delFaultCodeShowF" title="">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span
            >删除后不会影响已经生成的保养任务，但不会继续生成任务，是否确认删除？</span
          >
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="create" title="修改保养项目" width="800">
      <Form class="formList" :model="formItem" label-position="top" inline>
        <Row>
          <Col span="12">
             <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item" required>
              <Select
                v-model="formItem.classification"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
                style="width: 300px"
              >
                <Option
                  v-for="(item, index) of classification"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem></Col
          >
          <Col span="12"
            ><FormItem :label="`${$t('maintenance.MaintenanceItem')}:`" required>
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
                style="width: 300px"
              /> </FormItem
          ></Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem :label="`${$t('maintenance.Frequency')}:`" class="item" required>
              <Select
                v-model="formItem.period"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
                style="width: 300px"
              >
                <Option
                  v-for="(item, index) of period"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem></Col
          >
          <Col span="12"
            > <FormItem :label="`${$t('spareParts.Specification')}:`">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
                style="width: 300px"
              /> </FormItem
          ></Col>
        </Row>
        <Row>
          <Col span="12"
            ><FormItem :label="`${$t('maintenance.Checkmethods')}:`">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
                style="width: 300px"
              /> </FormItem
          ></Col>
          <Col span="12"
            > <FormItem :label="`${$t('maintenance.Checktools')}:`">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                style="width: 300px"
                :maxlength="32"
              /> </FormItem
          ></Col>
        </Row>

        <Row>
          <Col span="12"
            ><FormItem label="上限">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                style="width: 300px"
                :maxlength="32"
              /> </FormItem
          ></Col>
          <Col span="12"
            ><FormItem :label="`${$t('maintenance.LowerLimit')}:`">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                style="width: 300px"
                :maxlength="32"
              /> </FormItem
          ></Col>
        </Row>
        <Row>
          <Col span="12">
             <FormItem :label="`${$t('maintenance.Unit')}:`">
              <Input
                type="text"
                v-model="formItem.materialCode"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                style="width: 300px"
                :maxlength="32"
              /> </FormItem
          ></Col>
          <Col span="12"></Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="create = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <div class="pageWrap">
      <Page
        :total="total"
        :page-size="pageSize"
        :page-size-opts="$variable.pageSizes"
        :current="pageNum"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        show-sizer
        show-total

      />
    </div>
  </div>
</template>

<script>
export default {
  name: "waitConfirmed",
  props: {
    waitTotal: {
      type: Number
    },
    dataSource: {
      type: Array
    }
  },
  data() {
    return {
      searchParams: {},
      total: this.waitTotal,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      allCheck: false,
      create: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      formItem: {},
      classification: [
        { name: "CNC", key: "CNC" },
        { name: "PLC", key: "PLC" },
        { name: "IPC", key: "IPC" },
      ],
      category: [],
      period: [
        { name: "月度", key: "month" },
        { name: "季度", key: "quarter" },
        { name: "年度", key: "year" },
      ],
      cycle: [
        { name: "全部", key: "" },
        { name: "日", key: "1" },
        { name: "周", key: "2" },
        { name: "月", key: "3" },
        { name: "季度", key: "4" },
        { name: "半年度", key: "5" },
        { name: "年度", key: "6" },
        { name: "计数", key: "7" },
        { name: "计时", key: "8" },
      ],
      columns: [
        {type: 'selection', align: 'center', width: 60},
        { title: "设备类别", key: "category" },
        { title: "保养位置", key: "position" },
        { title: "保养分类", key: "classification" },
        { title: "保养周期", key: "cycle" },
        { title: "保养项目", key: "content" },
        { title: "保养方法", key: "function" },
        { title: "单位", key: "company" },
        { title: "上限", key: "up" },
        { title: "下限", key: "down" },
        { title: "创建人", key: "creater" },
        { title: "审核人", key: "reviewer" },
        { title: `${ this.$t('common.operation') }`, slot: "action", width: 200, align: "center" },
      ],
      data: this.dataSource,
    };
  },
  mounted() {
    this.getDeviceList()
  },
  methods: {
    getDeviceList() {
      this.axios({
        method: 'get',
        url: '/dms/dmsCategory/getSelectList',
        params: {}
      }).then(res => {
        if(res.code === 200){
          this.category = res.data
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item) => {
        myArray.push({ id: item.id });
      });

      this.delIds = myArray;
      if (selection.length > 1) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    edit() {
      this.create = true;
    },
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      console.log(row, "row");
    },
    createfaultCodeShowH() {
      this.visible = true;
    },
    deleteOk() {},
    addOk() {},
    //分页
    changeNum(){
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val){
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        status: 0,
        pageNo:this.pageNum,
        pageSize:this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainItem/list',
        params: params
      }).then(res => {
        
        if(res.code === 200){
          this.data = res.data.list
          this.total = res.data.total
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.waitConfirmed {
  .pageWrap {
    text-align: right;
  }
}
</style>
